<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Examples</title>
  <link rel="stylesheet" href="https://unpkg.com/style.css">
  <style type="text/css">
    .markdown-body {
      max-width: 46em;
      margin: 2em auto;
      padding: 0 1em;
      overflow: hidden;
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <main class="markdown-body"><link id="viewx-style-style-0" rel="stylesheet" type="text/css" href="https://unpkg.com/highlight.js@9.18.1/styles/darkula.css">
<hr>
<h3>JSONX Manual</h3>
<ul>
<li><a href="https://repetere.github.io/jsonx/">Home</a></li>
<li><a href="../getting-started/index.html">Getting Started</a></li>
<li><a href="../using-external-and-custom-components/index.html">External and Custom Components</a></li>
<li><a href="../using-advanced-props/index.html">Using Advanced Props</a></li>
<li><a href="../creating-react-components-and-component-libraries/index.html">Creating React Components and Component Libraries</a></li>
<li><a href="../spec/index.html">JSONX &amp; JXM Spec</a></li>
<li><a href="../samples/index.html">Samples</a></li>
<li><a href="../roadmap/index.html">Roadmap</a></li>
<li><a href="../../index.html">Full API Docs</a></li>
</ul>
<hr>
<h1>Examples</h1>
<ol>
<li><a href="https://jsfiddle.net/yawetse/ka7ghypd/6/">Getting Started Basic Example</a></li>
<li><a href="https://jsfiddle.net/yawetse/gctmsojp/16/">Custom Library: React Bootstrap Example</a></li>
</ol>
<p>Some other sample page</p>
<div style="color:red;">
this is raw <strong>html</strong>
  <section id="putHere">replace</section>
</div>
<script src="../../media/basic/basic.js"></script>
<h3>Example Browser Usage</h3>
<pre><code class="hljs language-html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>JSONX TEST<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jsonx.umd.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"root"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="language-javascript">
      <span class="hljs-keyword">const</span> sampleJSONX = {
        <span class="hljs-attr">component</span>: <span class="hljs-string">'div'</span>,
        <span class="hljs-attr">props</span>: {
          <span class="hljs-attr">id</span>: <span class="hljs-string">'generatedJSONX'</span>,
          <span class="hljs-attr">className</span>:<span class="hljs-string">'jsonx'</span>,
        },
        <span class="hljs-attr">children</span>: [
          {
            <span class="hljs-attr">component</span>: <span class="hljs-string">'p'</span>,
            <span class="hljs-attr">props</span>: {
              <span class="hljs-attr">style</span>: {
                <span class="hljs-attr">color</span>: <span class="hljs-string">'red'</span>,
                <span class="hljs-attr">fontWeight</span>:<span class="hljs-string">'bold'</span>,
              },
            },
            <span class="hljs-attr">__dangerouslyEvalProps</span>:{
              <span class="hljs-attr">onClick</span>:<span class="hljs-string">'()=&gt;alert("click works")'</span>
            },
            <span class="hljs-attr">children</span>:<span class="hljs-string">'hello world'</span>,
          },
        ],
      };
      <span class="hljs-keyword">const</span> boundConfig = {
        <span class="hljs-attr">debug</span>:<span class="hljs-literal">true</span>, 
      };
      jsonx.<span class="hljs-property">jsonxRender</span>.<span class="hljs-title function_">call</span>(boundConfig,{ <span class="hljs-attr">jsonx</span>: sampleJSONX, <span class="hljs-attr">querySelector</span>:<span class="hljs-string">'#root'</span>, });
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<div style="text-align:center;">
<img src="https://raw.githubusercontent.com/repetere/jsonx/master/docs/jsonx-logo.png" style="max-width:160px;">
</div>
<!-- jsdoc src/components.js -c jsdoc.json  -->
<hr>
<h3>JSONX Manual</h3>
<ul>
<li><a href="../getting-started/index.html">Getting Started</a></li>
<li><a href="../using-external-and-custom-components/index.html">External and Custom Components</a></li>
<li><a href="../using-advanced-props/index.html">Using Advanced Props</a></li>
<li><a href="../creating-react-components-and-component-libraries/index.html">Creating React Components and Component Libraries</a></li>
<li><a href="../roadmap/index.html">Roadmap</a></li>
<li><a href="../spec/index.html">JSONX &amp; JXM Spec</a></li>
<li><a href="../examples/index.html">Samples</a></li>
</ul>
</main>


</body></html>